<template>
    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
        <el-col :xs="24" :sm="12" :lg="8" class="mb-2" v-for="item in chartData" :key="item">
            <component :is="chartComponent(item)" :id="item" height="400px" width="100%"
                class="bg-[var(--el-bg-color-overlay)]" />
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
// 图表数据
const chartData = ref([
    "BarChart",
    "PieChart",
    "RadarChart",
    "FunnelChart",
    "StackedAreaChart",
    "LargeAraChart",
]);
const chartComponent = (item: string) => {
    return defineAsyncComponent(() => import(`./components/${item}.vue`));
};
</script>